<template>
  <div>
    <a-steps changeable :current="current">
      <a-step description="获取验证码">获取邮箱验证码</a-step>
      <a-step description="密码重置">重置密码</a-step>
      <a-step description="完成">完成</a-step>
    </a-steps>
    <div :style="{
      width: '1200px',
      height: '500px',
      textAlign: 'center',
      background: 'var(--color-bg-2)',
      color: '#C2C7CC',
    }">
      <a @click="returnHome" style="left:550px;color:#2d8cf0; top:-150px;font-size: 16px;">返回登陆</a>
      <!-- 步骤一 -->
      <div style="line-height: 160px;" v-if="current == 1">
        <div class="demo-register" style="width: 500px;height: 500px;top: 90px;">
          <Login ref="form" @on-submit="handleSubmit">
            <Email name="mail" />
            <Poptip trigger="focus" placement="right" width="240">
              <!-- <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写"
                @on-change="handleChangePassword" /> -->
              <template #content>
                <div class="demo-register-tip">
                  <div class="demo-register-tip-title" :class="passwordTip.class">
                    强度：{{ passwordTip.strong }}
                  </div>
                  <Progress :percent="passwordTip.percent" hide-info :stroke-width="6"
                    :stroke-color="passwordTip.color" />
                  <div class="demo-register-tip-desc">
                    请至少输入 6 个字符。请不要使用容易被猜到的密码。
                  </div>
                </div>
              </template>
            </Poptip>
            <div class="emo-login">
              <!-- 验证码 -->
              <Captcha name="captcha" v-model="mycode" :field="['mail']" @on-get-captcha="handleGetCaptcha" />
            </div>
            <a-space size="large">
              <Submit>下一步</Submit>
            </a-space>
          </Login>
        </div>
      </div>
      <!-- 步骤二 -->
      <div style="line-height: 160px;" v-if="current == 2">
        <div class="demo-register" style="width: 500px;height: 500px;">
          <Login ref="form" @on-submit="handleSubmit2" style="top: 120px;">
            <Poptip trigger="focus" placement="right" width="240">
              <Password name="password" :rules="passwordRule" placeholder="至少6位密码，区分大小写"
                @on-change="handleChangePassword" />
              <template #content>
                <div class="demo-register-tip">
                  <div class="demo-register-tip-title" :class="passwordTip.class">
                    强度：{{ passwordTip.strong }}
                  </div>
                  <Progress :percent="passwordTip.percent" hide-info :stroke-width="6"
                    :stroke-color="passwordTip.color" />
                  <div class="demo-register-tip-desc">
                    请至少输入 6 个字符。请不要使用容易被猜到的密码。
                  </div>
                </div>
              </template>
            </Poptip>
            <a-space size="large">
              <Submit>下一步</Submit>
            </a-space>

          </Login>
        </div>
      </div>
      <!-- 步骤三 -->
      <div style="line-height: 160px;" v-if="current == 3">
        <div style="left: 450px;">
          <el-col :sm="12" :lg="6">
            <el-result icon="success" title="修改成功" sub-title="即将跳转到登陆页面">
            </el-result>
          </el-col>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      current: 1,
      passwordRule: [
        {
          required: true, message: '密码不能为空！', trigger: 'change'
        },
        {
          min: 6, message: '密码不能少于6位！', trigger: 'change'
        }
      ],
      passwordConfirmRule: [
        {
          required: true, message: '确认密码不能为空！', trigger: 'change'
        },

      ],
      // 密码长度，在密码强度提示时作为判断依据
      passwordLen: 0,
      code: '',
      mycode: '',
      email: ''
    };
  },
  computed: {
    // 密码强度提示文案等
    passwordTip() {
      let strong = '强';
      let className = 'strong';
      let percent = this.passwordLen > 10 ? 10 : this.passwordLen;
      let color = '#19be6b';

      if (this.passwordLen < 6) {
        strong = '太短';
        className = 'low';
        color = '#ed4014';
      } else if (this.passwordLen < 10) {
        strong = '中';
        className = 'medium';
        color = '#ff9900';
      }

      return {
        strong,
        class: 'demo-register-tip-' + this.passwordLen < 6 ? 'low' : (this.passwordLen < 10 ? 'medium' : 'strong'),
        percent: percent * 10,
        color,
      }
    }
  },
  methods: {

    returnHome() {
      this.$router.push('/login')
    },
    handleChangePassword(val) {
      this.passwordLen = val.length;
    },
    /* 发送邮件 */
    handleGetCaptcha(valid, { mail }) {
      axios.post('http://8.130.43.203:8080/user/email/', { "email": mail }).then(resp => {
        this.code = resp.data
      })
    },

    handleSubmit(valid, { mail, password, captcha }) {
      if (valid) {
        if (this.code == captcha) {
          this.email = mail
          this.current = Math.min(3, this.current + 1)
          console.log("123");
        } else {
          this.$Message.error('验证码错误，请重新输入');
        }

      }
    },
    handleSubmit2(valid, { mail, password, captcha }) {

      if (valid) {
        axios.put('http://8.130.43.203:8080/user/pwd', {
          "email": this.email,
          "pwd": password
        }).then(resp => {
          this.current = Math.min(3, this.current + 1)
          setTimeout(() => {
            this.$router.push('/login')
          }, 3000);

        })
      }
    },
  }
};
</script>
<style>
.bottom {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 1200px;
}

.blog-intro2 {
  font-size: 1.5rem;
}

.demo-register {
  width: 400px;
  margin: 0 auto !important;
}

.demo-register .ivu-poptip,
.demo-register .ivu-poptip-rel {
  display: block;
}

.demo-register-tip {
  text-align: left;
}

.demo-register-tip-low {
  color: #ed4014;
}

.demo-register-tip-medium {
  color: #ff9900;
}

.demo-register-tip-strong {
  color: #19be6b;
}

.demo-register-tip-title {
  font-size: 14px;
}

.demo-register-tip-desc {
  white-space: initial;
  font-size: 14px;
  margin-top: 6px;
}
</style>